<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">
        <h2>待办事项 - {{title}}</h2>
        <input type="text" v-model="msg">
        <input type="button" value="添加" @click="add">
        <input type="button" value="查找" @click="search">
        <br>
        <input type="checkbox" id="allCheck" v-model="ac"><label for="allCheck">全选</label>
        <ul>
            <li v-for="(item,idx) in list" :key="item.id">
                <input type="checkbox" v-model="item.check">

                <!-- 输入框和span，根据数据中的修改标志决定显示或隐藏 -->
                <!-- 切换时只要需要切换当前数据的修改标志即可 -->
                <!-- 切换：取反 -->
                <input v-if="item.flag" type="text" v-model="item.title" @blur="item.flag = !item.flag">
                <span v-else @click="item.flag = !item.flag">{{item.title}}</span>

                <input type="button" value="删除" @click="del(item.id)">
            </li>
        </ul>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>
    const {createApp} = Vue;
    createApp({
        data(){
            return {
                title:"TodoList",
                originList:[{
                    id: 1,
                    title: "今晚要完成Vue的购物车案例",
                    flag: false,
                    check: false
                },{
                    id: 2,
                    title: "今天要好好学习",
                    flag: false,
                    check: true
                }],
                list: [],
                msg: "",
                num:2
            }
        },
        methods:{
            add(){
                // 模拟id
                this.num++;
                // 添加数据到原列表数据
                this.originList.push({
                    id: this.num,
                    title: this.msg,
                    flag: false,
                    check: false
                })
                this.list = [...this.originList];
                // 清空输入框
                this.msg = "";
            },
            search(){
                // 从原数据中查找到符合要求的数据，存入一个新数组
                this.list = this.originList.filter(val=>val.title.includes(this.msg));
            },
            del(id){
                // 查找要删除数据的索引
                let i = 0;
                this.originList.some((val,idx)=>{
                    i = idx;
                    return val.id === id;
                })
                // 从数组中删除该索引对应的数据
                this.originList.splice(i, 1);
                this.list = [...this.originList];
            }
        },
        created() {
            // vue实例创建之后执行的回调函数
                // 超纲：临时使用
            // 将原列表数据，设置给要渲染的列表数据
            // 保持原数据和要渲染的数据同步
            this.list = this.originList;
        },
        computed: {
            ac:{
                get(){
                    return this.list.every(val=>val.check);
                },
                set(v){
                    this.list.forEach(val=>val.check=v)
                }
            }
        }
    }).mount(".app")
</script>
</html>